<!doctype html>
<html lang=en>

<head>
  <meta charset=utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex,nofollow">
  <title>Cloud Run Service Health / Readiness Probe Demo</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="preload" as="font">
  <link
    href=""
    rel="icon" type="image/png" />
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-display: fallback;
      background: url('/assets/cloud_bg.svg');
      background-size: cover;
      background-position: center;
      line-height: 1.6;
    }

    .container {
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }

    code {
      font-family: 'Roboto Mono', Courier, monospace;
      color: #A30038;
      background-color: #F8F8F8;
      border: 1px solid #DDD;
      border-radius: 2px;
      padding: 0 6px;
      font-weight: 500;
    }
  </style>
</head>

<body>
  <div class="container">
    <div style="text-align:center;">
      <picture>
        {{if and .ReadinessEnabled .IsHealthy}}
        <img src="/assets/celebration.svg" alt="A group celebrating">
        {{else}}
        <img src="/assets/sad-unicorn.svg" alt="A sad unicorn">
        {{end}}
      </picture>
      <div>
        <h1>Serving from {{.Region}}</h1>
        <h2>Readiness probe is {{.HealthStr}} on this instance!</h2>
      </div>
    </div>

    <p>
      Serving instance ID: <code>{{printf "%.15s" .InstanceId}}...</code>,
      project <code>{{.Project}}</code>,
      region <code>{{.Region}}</code>,
      service <code>{{.ServiceName}}</code>,
      revision <code>{{.Revision}}</code>.
    </p>

    {{if .ReadinessEnabled}}
    <p>
      The readiness probe has the following configuration:
      timeout seconds: <code>{{.ReadinessProbeConfig.TimeoutSeconds}}</code>,
      period seconds: <code>{{.ReadinessProbeConfig.PeriodSeconds}}</code>,
      success threshold: <code>{{.ReadinessProbeConfig.SuccessThreshold}}</code>,
      failure threshold: <code>{{.ReadinessProbeConfig.FailureThreshold}}</code>,
      http path: <code>{{.ReadinessProbeConfig.HttpGetAction.Path}}</code>,
      http port: <code>{{.ReadinessProbeConfig.HttpGetAction.Port}}</code>.
    </p>
    {{end}}

    <label for="autoRefreshCheckbox">
      <input type="checkbox" id="autoRefreshCheckbox">
      Enable Auto-Refresh (3s)
    </label>

    <hr>
    <h3>Serving regions for this service:</h3>
    <table>
      <thead>
        <tr>
          <th>Served By</th>
          <th>Region</th>
          <th>Healthy Instances</th>
          <th>Toggle Healthy</th>
          <th>Toggle Unhealthy</th>
        </tr>
      </thead>
      <tbody>
        {{range $key, $value := .Regions}}
        <tr>
          <td>
            {{if eq $.Region $key}}
            👉
            {{end}}
          </td>
          <td>{{$key}}</td>
          <td>
            {{$value.NumHealthy}}/{{$value.Total}}
          </td>
          <td>
            <form action="/set_readiness" method="post">
              <input type="text" name="region" value="{{$key}}" hidden />
              <input type="text" name="is_healthy" value="true" hidden />
              <input type="submit" value="Toggle" />
            </form>
          </td>
          <td>
            <form action="/set_readiness" method="post">
              <input type="text" name="region" value="{{$key}}" hidden />
              <input type="text" name="is_healthy" value="false" hidden />
              <input type="submit" value="Toggle" />
            </form>
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>

    <hr>
    <h3>Serving instances for this service:</h3>
    <table>
      <thead>
        <tr>
          <th>Served By</th>
          <th>Location</th>
          <th>Revision Name</th>
          <th>Instance Id</th>
          <th>Readiness</th>
          <th>Toggle</th>
        </tr>
      </thead>
      <tbody>
        {{range .Instances}}
        <tr>
          <td>
            {{if eq $.InstanceId .InstanceId}}
            👉
            {{end}}
          </td>
          <td>{{.Region}}</td>
          <td>{{.RevisionName}}</td>
          <td>{{printf "%.15s" .InstanceId}}...</td>
          <td>
            {{.HealthStr}}
          </td>
          <td>
            {{if .ReadinessEnabled}}
            <form action="/set_readiness" method="post">
              <input type="text" name="instance_id" value="{{.InstanceId}}" hidden />
              <input type="submit" value="Toggle" />
            </form>
            {{end}}
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>

    <hr>
    The above configuration is written to
    <a href="https://pantheon.corp.google.com/storage/browser/{{.Bucket}};&project={{.Project}}" target="_blank"
      rel="noopener">
      gs://{{.Bucket}}</a>.
    It's safe to delete the GCS bucket at any time.

    <br>
    <a href="https://console.cloud.google.com/run/detail/{{.Region}}/{{.ServiceName}}/metrics?project={{.Project}}"
      target="_blank" rel="noopener">
      VIEW CLOUD RUN IN CLOUD CONSOLE</a>
  </div>
  <script>
    let reloadInterval;
    const checkbox = document.getElementById('autoRefreshCheckbox');

    function startAutoRefresh() {
      if (reloadInterval) return;
      reloadInterval = setInterval(() => {
        location.reload();
      }, 3000);
      sessionStorage.setItem('autoRefreshState', 'enabled');
    }

    function stopAutoRefresh() {
      if (reloadInterval) {
        clearInterval(reloadInterval);
        reloadInterval = null;
      }
      sessionStorage.setItem('autoRefreshState', 'disabled');
    }

    checkbox.addEventListener('change', function () {
      if (this.checked) {
        startAutoRefresh();
      } else {
        stopAutoRefresh();
      }
    });

    function initializePage() {
      const savedState = sessionStorage.getItem('autoRefreshState');
      if (savedState === 'enabled') {
        checkbox.checked = true;
        startAutoRefresh();
      } else {
        checkbox.checked = false;
        stopAutoRefresh();
      }
    }

    window.onload = initializePage;
  </script>
</body>

</html>